import React from 'react';
import {Provider} from 'react-redux';
import * as Bootstrap from 'react-bootstrap';
import BaseContainer from './BaseStepContainer';

import * as action from "../actions/TechnologyContainerAction";
import {technologyContainerStore} from '../stores/TechnologyContainerStore';
import  './Technology.less';

import GlobalWordCloudComponent from "../components/general/GlobalWordCloudComponent";
import ProgressGroupComponent from "../components/general/ProgressGroupComponent";

export default class TechnologyContainer extends BaseContainer {

    constructor(props) {
        super(props);
        this.state.stepName = "Technology";
    };

    contentRender() {
        let wordCloudList = [];
        let processRenderList = [];
        let {technologyList} = this.state;

        if (technologyList) {
            const BS_STYLES = ["primary", "success", "info", "warning", "danger"];
            technologyList.sort((i, j)=>j.score - i.score);
            technologyList.map((item, index)=> {
                const {subject, type, score} = item;
                wordCloudList.push({
                    "content": subject,
                    "size": score * 0.6
                });
                processRenderList.push(
                    <ProgressGroupComponent key={index} title={subject} percent={score}
                                            bsStyle={BS_STYLES[index % BS_STYLES.length]}/>
                );
            });
        }

        return (
            <Provider store={technologyContainerStore}>
                <Bootstrap.Row>
                    <Bootstrap.Col xs={8} xsOffset={2}>
                        <Bootstrap.Row>
                            <GlobalWordCloudComponent id="technologyGlobal" contentList={wordCloudList} height="300px"/>
                        </Bootstrap.Row>
                        {processRenderList}
                    </Bootstrap.Col>
                </Bootstrap.Row>
            </Provider>
        );
    }

    componentWillMount() {
        const {self}= this.state;
        technologyContainerStore.subscribe(() => {
            const {technologyReducer} = technologyContainerStore.getState();
            self.reloadIntroduction(technologyReducer);
        });
        technologyContainerStore.dispatch(action.getTechnology());
    }

    reloadIntroduction(technologyReducer) {
        if (technologyReducer.isChange) {
            technologyReducer.payload.then((data) => {
                const {code, result} = data;
                if (1 == code) {
                    this.setState({
                        "technologyList": result
                    });
                }
            });
        }
    }

}
